<template>
  <div class="code-wrapper" v-show="codeIsShow">
    <div class="common-box">
      <label class="common-label">请输入运算符 :</label>
      <div class="commonLine">
        <c-select
          ref="operator"
          v-model="codeOperators"
          @change="handlerOperators"
          placeholder="请输入运算符"
          value-key="s-operators">
            <c-option
              v-for="item in resultsymbolData"
              :key="item.objId"
              :label="item.symbolName"
              :value="item.objId"
            />
        </c-select>
      </div>
    </div>
    <div class="common-box">
      <label class="common-label">请输入条件 :</label>
      <div class="commonLine">
        <c-select
          class="condition-select"
          ref="condition"
          v-model="conditions"
          @change="handlerCondition"
          placeholder="请输入条件"
          value-key="s-conditions">
          <c-option
            v-for="item in conditionOptions"
            :key="item.codeId"
            :label="item.codeName"
            :value="item.codeId"
          />
        </c-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "codes",
  data() {
    return {
      codeIsShow: true
    };
  },
  props: {
    value: [Object, Array, String, Number],
    resultsymbolData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    handlerCondition(val) {
      this.$emit("changeConditions", val);
    },
    handlerOperators(val) {
      this.$emit("changeCodeOperators", val);
    }
  },
  computed:{
    conditionOptions: {
      get() {
        return this.value.conditionsDirectoryVal
      },
      set(val) {
        this.conditionOptions = val
      }
    },
    conditions: {
      get() {
        return this.value.conditionsVal
      },
      set(val) {
        this.conditionsVal = val
      }
      // return this.value.conditionsVal;
    },
    codeOperators: {
      get() {
        return this.value.codeOperatorsVal
      },
      set(val) {
        this.codeOperatorsVal = val
      }
      // return this.value.codeOperatorsVal;
    }
  }
};
</script>
